<!--
  *@Description : 注册组件
  *@author 萧红
  *@date 2020-03-22 20:13
  *@LastEditTime 2020-03-22 20:13
  *@LastEdititors
-->
<template>
  <div id="reg">
    <tittle :title="'注册'" :show-back="1"></tittle>
    <div :style="{height:$inerHeight + 55 + 'px'}">
      <div class="img">
        <img src="../../../static/default_header.png" alt="图标" width="100%" height="186px">
      </div>
      <div class="group">
        <!--选择图像区域 -->
        <div class="avatar">
          <cube-upload ref="upload" v-model="files" action="http://112.126.100.206/uploadFile" @files-added="filesAdded">
            <div class="clear-fix avatar">
              <cube-upload-btn :multiple="false" class="avatar-btn">
                <img :src="avatarUrl" alt="">
              </cube-upload-btn>
            </div>
          </cube-upload>
        </div>
        <!--用户名密码区域-->
        <cube-input v-model="username" class="input-name" placeholder="请输入昵称" :clearable="true"  :maxlength="10">
          <span class="cubeic-person iconperson" slot="prepend"></span>
        </cube-input>
        <cube-input v-model="mobile" class="input-name" placeholder="请输入手机号" :clearable="true" :maxlength="11">
          <span class="iconfont iconshouji" slot="prepend"></span>
        </cube-input>
        <cube-input  type="password" v-model="password"  class="input-pass" placeholder="请输入密码" :eye="{open:false}" :maxlength="16">
          <span class="iconfont iconmima" slot="prepend"></span>
        </cube-input>
        <!--// 选择性别区域-->
        <div class="sex">
          <cube-radio-group v-model="sex" :options="sexOption" position="right" :hollow-style="true" class="radio-group"/>
        </div>
        <div class="btn" @click="reg">注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import Tittle from '../../components/Tittle'
export default {
  components: {
    Tittle
  },
  data () {
    return {
      avatarUrl: '../../../static/default_avatar.png',
      files: [],
      username: '', // 用户名
      // 手机号
      mobile: '',
      // 密码
      password: '',
      sex: '0',
      sexOption: [
        {
          label: '萌妹子',
          value: '0'
        },
        {
          label: '帅汉子',
          value: '1'
        }
      ]
    }
  },
  created () {
  },
  methods: {
    reg () {
      if (this.userAgent === '') {
        this.$toast('请输入用户名')
        return false
      } else if (this.mobile === '') {
        this.$toast('请输入手机号')
        return false
      } else if (this.password === '') {
        this.$toast('请输入密码')
        return false
      } else {
        // 判断手机号的正则表达式
        let regMob = /^1[0-9]{10}$/
        let regPsw = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/ // 验证密码是否是两种以上的不同字符，数字,字母,特殊字符
        if (this.username.length > 8) {
          this.$toast('用户名长度不能超过8', 'warn')
          return false
        }
        if (!regMob.test(this.mobile)) {
          this.mobile = ''
          this.$toast('手机号不合法', 'warn')
          return false
        } else if (!regPsw.test(this.password) || this.password.length < 6) {
          this.password = ''
          this.$toast('密码长度大于6且包含两种不同的字符，数字，字母，特殊符号', 'warn')
          return false
        }
        let formData = new FormData()
        formData.append('file[]', this.files[0])
        formData.append('phone', this.$md5(this.mobile))
        formData.append('password', this.$md5(this.password))
        formData.append('username', this.username)
        formData.append('sex', this.sex)
        let url = '/user/regist'
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$post(url, formData, config).then((res) => {
          if (res.code === 200) {
            this.$toast('正在登陆', 'loading', 2000)
            localStorage.setItem('userId', res.id) // 保存用户id
            localStorage.setItem('info', JSON.stringify(res.info)) // 保存用户信息
            setTimeout(() => {
              this.toNewPage('/home')
            }, 2000)
          } else if (res.code === -1) {
            this.$toast(res.msg)
          }
        })
      }
    },
    filesAdded (files) {
      const file = files[0]
      file && this.$refs.upload.removeFile(file)
      let formart = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      let hasIgnore = false
      const maxSize = 2 * 1024 * 1024 // 1M
      if (typeof file === 'object') {
        if (!formart.includes(file.type)) {
          file.ignore = true
          this.$toast('上传的不是图片文件(jpg,jpeg,png,gif)', 'warn', 1000)
          return false
        } else if (file.size > maxSize) {
          file.ignore = true
          hasIgnore = true
        } else {
          var fileReader = new FileReader()
          fileReader.readAsDataURL(file)
          var that = this
          fileReader.onload = function (e) {
            that.avatarUrl = e.currentTarget.result
          }
          this.files[0] = file
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        txt: '文件大小不能超过2M'
      }).show()
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../node_modules/stylus-px2rem"
  #reg{
    .img{
      position relative;
      top:0px;
    }
    .group
    {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      justify-content space-around
      div
      {
        border none
        .iconshouji,.iconmima,.iconperson
        {
          font-size:10px
          color: rgb(255,102,153)
        }
      }
      .avatar
      {
        width 35px
        height 35px
        line-height 40px
        margin 2px auto
        margin-bottom 10px
        border-radius 50%
        .avatar-btn
        {
          width 100%
          height 100%
          img
          {
            width 100%
            height 100%
            border-radius 50%
          }
        }
      }
      .input-name,.input-pass
      {
        margin: 2px 0px
      }
      .sex
      {
        .radio-group
        {
          display: flex;
          justify-content: center;
        }
      }
      .btn
      {
        line-height 15px
        color:snow;
        position relative
        top:10px;
        border-radius: 20px;
        background-color: #fd88fa;
        background-image: linear-gradient(90deg, #ffbdd3 0%, #ff6699 100%);
      }
    }
  }
</style>
